<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style>
        a {
            color: #005980;
        }

        .widget-small {
            background-color: #FFFFFF;
            overflow: hidden;
            text-align: center;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
        }

        .widget-small .fa {
            float: left;
            width: 40%;
            line-height: 80px;
            color: #FFFFFF;
        }

        .widget-user .fa {
            background-color: #029789;
        }

        .widget-visit .fa {
            background-color: #17a2b8;
        }

        .widget-message .fa {
            background-color: #fbad4c;
        }

        .widget-like .fa {
            background-color: #ff646d;
        }

        .widget-small-info {
            float: left;
            text-align: left;
            width: 40%;
            margin-left: 20px;
            margin-top: 18px;
            line-height: 24px;
        }

        .widget-small-info h4 {
            font-size: 18px;
        }

        .widget-small-info span {
            font-size: 16px;
        }

        .project-introduce {
            min-height: 466px;
        }

        .project-introduce h4 {
            font-weight: bold;
            margin-top: 12px;
            margin-bottom: 8px;
        }

        .project-introduce li {
            list-style: decimal;
            margin-left: 28px;
        }
        .layui-card .timo-card-screen {
            margin-left: 150px;
        }
    </style>
</head>
<body class="timo-layout-page">
<div class="layui-row layui-col-space15">
    <div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
        <div class="widget-small widget-user">
            <i class="icon fa fa-folder fa-3x"></i>
            <div class="widget-small-info">
                <h4>应用总数</h4>
                <span th:text="${appCount}"></span>
            </div>
        </div>
    </div>
    <div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
        <div class="widget-small widget-visit">
            <i class="icon fa fa-cogs fa-3x"></i>
            <div class="widget-small-info">
                <h4>任务总数</h4>
                <span th:text="${jobCount}"></span>
            </div>
        </div>
    </div>
    <div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
        <div class="widget-small widget-message">
            <i class="icon fa fa-comments-o fa-3x"></i>
            <div class="widget-small-info">
                <h4>任务触发总数</h4>
                <span th:text="${triggerCount}"></span>
            </div>
        </div>
    </div>
    <div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
        <div class="widget-small widget-like">
            <i class="icon fa fa-star fa-3x"></i>
            <div class="widget-small-info">
                <h4>任务执行总数</h4>
                <span th:text="${executeCount}"></span>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md15">
        <div class="layui-card">
            <form th:action="@{/admin/quartz/job/dashboard/count}">
                <input name="granularity" value="12" hidden="hidden">
                <input name="model" value="trigger" hidden="hidden">
                <div class="layui-card-header">任务触发统计</div>
                <div class="layui-row timo-card-screen">
                    <div class="pull-left layui-form-pane timo-search-box">
                        <div class="layui-inline">
                            <label class="layui-form-label">应用</label>
                            <div class="layui-input-block timo-search-data">
                                <select name="appId" class="timo-search-select">
                                    <option value="">全部</option>
                                    <option th:each="item:${apps}" th:text="${item.appName}"
                                            th:value="${item.id}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">任务</label>
                            <div class="layui-input-block timo-search-data">
                                <select name="jobId" class="timo-search-select">
                                    <option value="">全部</option>
                                    <option th:each="item:${jobs}" th:text="${item.jobName}"
                                            th:value="${item.id}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">起始时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="laydate1T" name="startTime"
                                       placeholder="yyyy-MM-dd HH:mm:ss">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">结束时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="laydate2T" name="endTime"
                                       placeholder="yyyy-MM-dd HH:mm:ss">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn ajax-echarts">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body project-introduce echarts" echartsColor="#5043cc, #e53b00"
                     echartsHead="触发次数, 触发失败次数">

                </div>
            </form>
        </div>
        <div class="layui-card">
            <form th:action="@{/admin/quartz/job/dashboard/count}">
                <input name="granularity" value="24" hidden="hidden">
                <input name="model" value="execute" hidden="hidden">
                <div class="layui-card-header">任务执行统计</div>
                <div class="layui-row timo-card-screen">
                    <div class="pull-left layui-form-pane timo-search-box">
                        <div class="layui-inline">
                            <label class="layui-form-label">应用</label>
                            <div class="layui-input-block timo-search-data">
                                <select name="appId" class="timo-search-select">
                                    <option value="">全部</option>
                                    <option th:each="item:${apps}" th:text="${item.appName}"
                                            th:value="${item.id}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">任务</label>
                            <div class="layui-input-block timo-search-data">
                                <select name="jobId" class="timo-search-select">
                                    <option value="">全部</option>
                                    <option th:each="item:${jobs}" th:text="${item.jobName}"
                                            th:value="${item.id}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">起始时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="laydate1E" name="startTime"
                                       placeholder="yyyy-MM-dd HH:mm:ss">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">结束时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="laydate2E" name="endTime"
                                       placeholder="yyyy-MM-dd HH:mm:ss">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn ajax-echarts">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body project-introduce echarts" echartsColor="#33cc00, #e5323e"
                     echartsHead="执行次数, 执行失败次数">

                </div>
            </form>
        </div>
    </div>
</div>
<script th:replace="/common/template :: script"></script>
<script th:src="@{/js/plugins/echarts.min.js}"></script>
<script th:src="@{/js/dashboard.js}"></script>
<script th:src="@{/js/index.js}"></script>
</body>
</html>
